<template>
  <!-- 通知面板 -->
  <div class="notification-container">
    <div class="backbar fix-bar">
      <div class="back flex-center" v-hammer:tap="(ev) => $router.push({name: 'Chat'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
    
    <div class="card-wrapper">
      <div class="no-data" style="margin-top: 20px" v-if="notifyList.lenght === 0">
        暂无通知
      </div>
      <cube-scroll
        ref="scroll"
        :data="notifyList"
        :options="options"
        :isPullingDown="isPullingDown"
        @pulling-down="onPullingDown"
        :scroll-events="['scroll']"
      >
        <ul class="group-list">
          <li
            v-for="(item, i) in notifyList"
            class="list-item flex-center"
            :key="i"
            v-hammer:tap="(ev) => onCardClicked(ev, item)"
          >
            <notification-common :card="item"/>
          </li>
        </ul>
      </cube-scroll>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Action, Mutation, Getter, namespace } from "vuex-class";
import { Webim } from '@/utils/types';
import { PageVo, Response } from '@/api/bean';
import { ImMessageReminding } from '@/api/http/bean';
declare const $Vue: Vue;
declare const webim: Webim;
const userModule = namespace("userModule");

@Component<Notification>({
  mixins: [MessageMixin],
})
export default class Notification extends Vue {
  // @userModule.State("memberInfo") memberInfo: any;
  private options: any = {
    pullDownRefresh: {
      txt: '刷新中...',
    },
  };

  private isPullingDown: boolean = false;

  private eventList: any = ['$getNotification'];

  private offset: number = 0;
  private limit: number = 5;
  private totalCount: number = 0;

  private notifyList: Array<any> = [
  //   {
  //   messageId: 1,
  //   userId: 1,
  //   userName: 'string',
  //   groupId: 'number',
  //   title: '退款到账通知',
  //   type: '1',
  //   createTime: new Date(),
  //   url: 'string',
  //   context: '[{"key":"退款方式","value":"退回工商銀行"},{"key":"退款原因","value":"過期退回過期退回過期退回過期退回過期退回過期退回過期退回"}]',
  // }
  ]

  protected mounted() {
    this.initEvents(this.eventList);

    this.sendMessage(MsgTypeKV.getNotification, {
      limit: this.limit, 
      offset: this.offset,
    });

  }

  private onPullingDown() {
    if (this.limit < this.totalCount) {
      this.limit += 5;
      this.isPullingDown = true;
      this.sendMessage(MsgTypeKV.getNotification, {
        limit: this.limit, 
        offset: this.offset,
      });
    } else {
      //  this.offset -= 5;
      this.isPullingDown = false;
      this.$createToast({
        txt: '已无更多通知',
        type: "warn",
        time: 3000
      }).show();
    }
  }

  private onCancel() {
    this.$router.go(-1);
  }

  private onCardClicked(ev: any, item: any) {
    
  }

    /**
   * 申请加入群之后的返回结果处理
   */
  private $getNotification(data: PageVo<ImMessageReminding>) {
    this.notifyList = data.dataList;
    this.totalCount = data.totalCount;
    this.offset = data.offset;
    this.limit = data.limit;
  }
}
</script>

<style lang="stylus" scoped>
.notification-container
  background #f1f1f1 
  width 100% 
  height 100% 
  box-sizing border-box

.card-wrapper
  padding 8px
  width 100% 
  position relative
  height calc(100% - 44px)
  box-sizing border-box

.group-list
  width 100% 
  height 100%
  .list-item
    margin-bottom 8px 
</style>

